import { Link } from "react-router-dom";
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Select,
  Popconfirm,
  message,
  Input,
} from "antd";
// 时间选择器的汉化语言包
import locale from "antd/es/date-picker/locale/zh_CN";
import { Table, Tag, Space } from "antd";
// import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import {
  EditOutlined,
  DeleteOutlined,
  CheckSquareFilled,
} from "@ant-design/icons";
// import img404 from '../../assets/error'
import error from "../../assets/error.png";
import { useChannel } from "../../hooks/useChannel";
const { Option } = Select;
const { RangePicker } = DatePicker;
import { getArticleListAPI } from "../../apis/arrticle";
import { useState } from "react";
import { useEffect } from "react";
import { deleteArticleAPI } from "../../apis/arrticle";
import { useNavigate } from "react-router-dom";
import { useSearchParams } from "react-router-dom";
const Article = () => {
  const { article } = useChannel();
  // 定义枚举状态
  const status = {
    1: <Tag color='warning'>未发布</Tag>,
    2: <Tag color='success'>已发布</Tag>,
  };
  // 删除文章
  const confirm = async (data) => {
    console.log(data.id);
    // 当删除完之后才去调用重新渲染的接口
    await deleteArticleAPI(data.id);
    setReqData({
      ...reqData,
    });
    message.success("删除成功");
  };
  // 调转到编辑页面
  const navigate = useNavigate();

  // 准备列数据
  const columns = [
    {
      title: "学号",
      dataIndex: "Scode",
    },
    {
      title: "姓名",
      dataIndex: "Sname",
    },
    {
      title: "所在学院",
      dataIndex: "Sxy",
    },
    {
      title: "办事类型",
      dataIndex: "Ttype",
    },
    {
      title: "预约时间",
      dataIndex: "Ttime",
    },
    {
      title: "部门名称",
      dataIndex: "Dname",
    },
    {
      title: "手机号",
      dataIndex: "Stel",
    },
    {
      title: "事宜描述",
      dataIndex: "Desctipion",
    },
    {
      title: "状态",
      dataIndex: "State",
      render: (data) => {
        return (
          // <Tag color={data === 1 ? "warning" : "success"}>{status[data]}</Tag>
          <Tag color={data == 1 ? "success" : "warning"}>
            {data == 1 ? "审批通过" : "审批未通过"}
          </Tag>
          // <Space size='middle'>
          //   {/* 编辑按钮 */}
          //   <Button
          //     type='primary'
          //     shape='circle'
          //     icon={<EditOutlined />}
          //     onClick={() => navigate(`/publish?id=${data.id}`)}
          //   />
          //   {/* 删除按钮 */}
          //   <Popconfirm
          //     title='批准申请'
          //     description='是否确认批准申请?'
          //     onConfirm={() => confirm(data)}
          //     okText='Yes'
          //     cancelText='No'
          //   >
          //     <Button
          //       type='primary'
          //       danger
          //       shape='circle'
          //       icon={<CheckSquareFilled />}
          //     />
          //   </Popconfirm>
          // </Space>
        );
      },
    },
  ];
  // 准备表格body数据
  const data = [
    {
      id: "8218",
      comment_count: 0,
      cover: {
        images: [],
      },
      like_count: 0,
      pubdate: "2019-03-11 09:00:00",
      read_count: 2,
      status: 2,
      title: "wkwebview离线化加载h5资源解决方案",
    },
  ];
  // 获取文章列表
  const [list, setList] = useState([]);
  const [count, setCount] = useState(0);
  //1.准备接口的参数
  const [reqData, setReqData] = useState({
    status: "",
    channel_id: "",
    begin_pubdate: "",
    end_pubdate: "",
    page: 1,
    per_page: 4,
  });
  useEffect(() => {
    // 获取列表数据
    // async function getList() {
    //   const res = await getArticleListAPI(reqData);
    //   setList(res.data.results);
    //   setCount(res.data.total_count);
    // }
    // getList();
    // 依赖的数据发生变化时候，useeffect内部的逻辑会重新执行
    setList([
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
        State: "1",
      },
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
        State: "1",
      },
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
        State: "1",
      },
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
        State: "0",
      },
      {
        ID: "8218",
        Scode: "2021213725",
        Sname: "张三",
        Sxy: "信息学院",
        Ttype: "Pop",
        Ttime: "2019-03-11 09:00:00",
        Dname: "学工部",
        Stel: 19861001519,
        Desctipion: "wkwebview离线化加载h5资源解决方案",
        State: "0",
      },
    ]);
    setCount(list.length);
  });
  //[reqData]
  //筛选文章功能

  //  获取筛选数据
  const onFinish = (formValue) => {
    console.log("formValue", formValue);
  };
  // 点击切换页数时
  const onPageChange = (value) => {
    console.log(value);
    setReqData({
      ...reqData,
      page: value,
    });
  };
  // 学号查询
  const success = () => {
    message.success("查询成功");
  };
  return (
    <div>
      {/* 筛选区域 */}
      <Card
        title={
          <Breadcrumb
            items={[
              { title: <Link to={"/"}>首页</Link> },
              { title: "审批记录" },
            ]}
          />
        }
        style={{ marginBottom: 20 }}
      >
        <Form initialValues={{ status: "" }} onFinish={onFinish}>
          <Form.Item label='学号' name='id'>
            <Input placeholder='输入学号查询' style={{ width: 240 }}></Input>
            {/* <Space>
              <Button
                type='primary'
                htmlType='submit'
                style={{ marginLeft: 40 }}
              >
                查询
              </Button>
            </Space> */}
          </Form.Item>
          <Form.Item>
            <Space>
              <Button
                type='primary'
                htmlType='submit'
                style={{ marginLeft: 40 }}
                onClick={success}
              >
                查询
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      {/* 文章列表区域 */}
      <Card title={`共${count}条审批记录：`}>
        <Table
          rowKey='id'
          columns={columns}
          dataSource={list}
          pagination={{
            total: count,
            pageSize: reqData.per_page,
            onChange: onPageChange,
          }}
        />
      </Card>
    </div>
  );
};

export default Article;
